<!--
 * @Author: LHL
 * @Date: 2022-10-12 11:20:51
 * @LastEditTime: 2022-10-16 17:55:35
 * @LastEditors: lhl
 * @Description: 系统配置页面
 * @FilePath: \新建文件夹 (2)\jep-training-trinity-group\briup-ui\src\pages\admin\baseConfig\List.vue
 * 别乱动！
-->
<template>
  <div>
    <!-- 新增按钮区域 -->
    <div>
      <el-button type="primary" @click="toAdd">新增</el-button>
    </div>
    <!-- 新增按钮结束 -->
    <!-- 表单区域开始 -->
    <el-table :data="tableData" style="width: 100%" v-loading='loading'>
      <el-table-column type="index" :index="1" label="序号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="val" label="值">
        <template slot-scope="scope">
          <el-image :src="scope.row.val" :alt="scope.row.val" style="width:100px ;">
            <div slot="error">
              <div>{{scope.row.val}}</div>
            </div>
          </el-image>
          <!-- <img :src="scope.row.val" :alt="scope.row.val" width="100"> -->
        </template>
      </el-table-column>
      <el-table-column prop="introduce" label="介绍" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button @click="toEdit(scope.row)" size="small">编辑</el-button>
          <el-button @click="toDele(scope.row.id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表单区结束 -->
    <!-- 模态框区域 -->
    <el-dialog :title="title" :visible.sync="visible" @close="close()">
      <el-form :model="form" :rules="rules" ref="myform">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="介绍" :label-width="formLabelWidth" prop="introduce">
          <el-input v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="tip.value" placeholder="请选择类型">
            <el-option v-for="item in tip" :key="item.id" :value="item.value"></el-option>
          </el-select>
          <!-- {{tip.value}} -->
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth" v-if="tip.value=='图片'">
          <el-upload class="avatar-uploader" :action="uploadFileURL" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item v-else-if="tip.value=='文字'" label="文字" :label-width="formLabelWidth">
          <el-input v-model="form.val" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('myform')">重 置</el-button>
        <el-button type="primary" @click="submitForm('myform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框区域 -->
  </div>
</template>
<script>
import { uploadFileURL } from '@/utils/config'
import { updateConfig, getConfig, deleteConfig } from '@/api/baseConfig'
export default {
  data() {
    return {
      tip: [
        { id: 1, value: '文字' },
        { id: 2, value: '图片' }
      ],
      uploadFileURL,
      imageUrl: '',
      formLabelWidth: '100px',
      visible: false,
      title: '',
      tableData: [],
      form: {
        name: '',
        val: '',
        introduce: ''
      },
      rules: {
        name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
        introduce: [{ required: true, message: '请输入配置介绍', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 获取所有配置信息
    async toGetConfigs() {
      this.loading = true
      let res = await getConfig()
      this.tableData = res.data
      // console.log(res)
      this.loading = false
    },
    // 添加
    toAdd() {
      this.imageUrl = ''
      this.visible = true
      this.form = {}
      this.title = '新增基础配置'
    },
    // 编辑
    toEdit(row) {
      this.imageUrl = row.val
      this.title = '编辑基础配置'
      this.visible = true
      this.form = { ...row }
    },
    // 通过id删除
    toDele(id) {
      this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(async () => {
          let res = await deleteConfig({ id })
          this.$message({
            type: 'success',
            message: res.message
          })
          this.toGetConfigs()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
    },
    // 重置按钮
    resetForm() {
      this.form = {}
    },
    submitForm() {
      this.$refs.myform.validate(async valid => {
        if (valid) {
          // console.log(this.form)
          this.visible = false
          let res = await updateConfig(this.form)
          this.toGetConfigs()
        } else {
          return false
        }
      })
      this.form = {}
    },
    // 关闭模态框
    close() {
      this.form = {}
      this.visible = false
    },
    // 图片上传成功回调
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.val = res.data
    },
    //图片上传之前大小判断
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  },
  created() {
    this.toGetConfigs()
  },
  watch: {},
  computed: {}
}
</script>
<style lang="scss" scoped>
</style>